<template>
  <div class="home">
    <div class="userinfo">
      <el-card class="box-card">
        <div class="welcome_title">
          <div class="welcome">welcome back，</div>
          <div class="user-name">Roberto Lamb</div>
        </div>
        <div class="detail_info">
          <el-row>
            <el-col :span="8">
              <div class="item">
                <div>ID:</div>
                <div>903428X374381266</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="item">
                <div>DEPARTMENT:</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="item">
                <div>DISCIPLINARY MANAGER:</div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="item">
                <div>ID:</div>
                <div>903428X374381266</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="item">
                <div>DEPARTMENT:</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="item">
                <div>DISCIPLINARY MANAGER:</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </div>
    <el-row :gutter="10" class="table-list">
      <el-col :span="12">
        <el-card class="box-card table-wrapper">
          <div slot="header" class="clearfix card_header">
            <div>TARGET SETTING</div>
            <div>2020 STATUS</div>
          </div>
          <el-table ref="table1" :data="tableData" style="width: 100%" highlight-current-row>
            <el-table-column label="TARGET NAME">
              <template slot-scope="scope">
                <div class="target-name">
                  <div>{{scope.row.name}}</div>
                  <div class="opacity"></div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="weight" label="WEIGHT" width="100"></el-table-column>
            <el-table-column prop="date" label="DATE" width="80"></el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card table-wrapper">
          <div slot="header" class="clearfix card_header">
            <div>TARGET SETTING</div>
            <div>2020 STATUS</div>
          </div>
          <el-table ref="table2" :data="tableData" style="width: 100%" highlight-current-row>
            <el-table-column label="TARGET NAME">
              <template slot-scope="scope">
                <div class="target-name">
                  <div>{{scope.row.name}}</div>
                  <div class="opacity"></div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="weight" label="WEIGHT" width="100"></el-table-column>
            <el-table-column prop="date" label="DATE" width="80"></el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getList } from "@/api/homeApi";
export default {
  data() {
    return {
      tableData: [],
      tableHeight: 412
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      try {
        // let res = await getList();
        let res = await getList();
        if (res.code === 20000) {
          this.tableData = res.data;
        }
      } catch (e) {}
    }
  }
};
</script>

<style lang="scss" scoped>
.userinfo {
  .welcome_title {
    display: flex;
    .welcome {
      font-style: italic;
      color: #888;
    }
    .user-name {
      font-weight: bold;
      font-weight: bold;
      color: #000;
    }
  }
  .detail_info {
    margin-top: 20px;
    .item {
      display: flex;
      border-bottom: 1px solid gainsboro;
    }
  }
}
.table-list {
  margin-top: 10px;
  .card_header {
    display: flex;
    justify-content: space-between;
  }
  .target-name {
    text-align: left;
    text-overflow: hidden;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    .opacity {
      //width: 5px;
      height: 100%;
      background-image: linear-gradient(
        to right,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 1)
      );
      position: absolute;
      right: 0;
      top: 0;
    }
  }
}
</style>